<template>
  <div class="publicBox updatePwd">
    <bindInfoContentComponent slot="content" :data="data">
      <span slot="infoContent">
        <span class="tips" :class="{ haveData: true }">已设置</span>
      </span>
      <button @click="handelShowDialog" slot="button">修改</button>
    </bindInfoContentComponent>
    <el-dialog
      :visible.sync="dialogVisible"
      ref="dialog"
      :close-on-click-modal="false"
      @close="changeClose"
    >
      <template slot="title">
        <div class="headTitle" v-if="!updatePass">修改密码</div>
        <div v-else />
        <img
          :src="require('@/assets/images/delete.png')"
          @click="handelClose"
        />
      </template>
      <el-form
        :model="updateForm"
        :rules="updateRules"
        ref="form"
        v-if="!updatePass"
        label-width="94px"
        :label-position="'right'"
      >
        <el-form-item label="旧密码：" prop="opassword">
          <el-input
            type="password"
            show-password
            v-model="updateForm.opassword"
            @keypress.enter.native.prevent
            placeholder="请输入旧密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码：" prop="password">
          <el-input
            v-model="updateForm.password"
            type="password"
            show-password
            @keypress.enter.native.prevent
            placeholder="请输入新密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="重复密码" prop="rpassword">
          <el-input
            type="password"
            show-password
            v-model="updateForm.rpassword"
            @keypress.enter.native.prevent
            placeholder="请输入重复新密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handelConfirm">确 定</el-button>
          <el-button @click="handelCancel">取 消</el-button>
        </el-form-item>
      </el-form>
      <div v-if="updatePass" class="successBox">
        <div>
          <img :src="require('@/assets/images/like.png')" class="passIcon" />
          密码修改成功！
        </div>
        <div>
          <el-button type="primary" @click="handelCancel">确 定</el-button>
          <span class="timer">{{
            autoClouselastTime ? `${autoClouselastTime}s后自动关闭` : ""
          }}</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import md5 from "js-md5";
import { mapState } from "vuex";
import { updateUserInfo, updatePassword } from "@/request/user";
const bindInfoContentComponent = () =>
  import("@/views/user/user/accountBindComponent/bindInfoContentComponent");
export default {
  components: {
    bindInfoContentComponent
  },
  data() {
    let pwdReg =
      /(?=.*([a-zA-Z].*))(?=.*[0-9].*)[a-zA-Z0-9-*/+.~!@#$%^&*()]{6,20}$/;
    var validatePassword = (rule, value, callback) => {
      if (!pwdReg.test(value)) {
        callback(
          new Error("请输入6-20位，必须包含数字与字母、或符号的有效密码！")
        );
      } else {
        callback();
      }
    };
    var validateRepeatPwd = (rule, value, callback) => {
      if (this.updateForm.password !== value) {
        callback(new Error("两次密码不一致！"));
      } else {
        callback();
      }
    };

    const mailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
    var checkEmail = (rule, value, callback) => {
      if (!mailReg.test(value)) {
        callback(new Error("请输入正确的邮箱格式"));
      } else {
        callback();
      }
    };
    return {
      updateForm: {
        opassword: "",
        password: "",
        rPassword: "",
      },
      updateRules: {
        opassword: [
          { required: true, message: "请输入旧密码", change: "blur" },
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur",
          },
          {
            validator: validatePassword,
            trigger: "change",
          },
          {
            validator: validatePassword,
            trigger: "blur",
          },
        ],
        rpassword: [
          {
            required: true,
            message: "确认密码不能为空",
            trigger: "blur",
          },
          {
            validator: validateRepeatPwd,
            trigger: "change",
          },
          {
            validator: validateRepeatPwd,
            trigger: "blur",
          },
        ],
      },
      dialogVisible: false,
      autoClouselastTime: 0, // 自动关闭时间
      updatePass: false, // 更新成功页面
      data: {
        iconName: "iconmima",
        title: "密码",
        tips: "用于保护账号信息和登录安全"
      }
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  methods: {
    // 打开弹出框
    handelShowDialog() {
      this.dialogVisible = true;
    },
    // dialog关闭弹窗回调
    changeClose() {
      this.updatePass = false;
    },
    // 关闭弹出框
    handelClose() {
      this.dialogVisible = false;
    },
    // 确定
    handelConfirm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // 信息校验成功
          this.handelSubmit();
        } else {
          // 信息校验不通过
          return false;
        }
      });
    },
    // 取消
    handelCancel() {
      this.dialogVisible = false;
    },
    // 提交数据
    handelSubmit() {
      console.log(this.updateForm);
      let params = {
        password: md5(this.updateForm.opassword),
        newPassword:md5(this.updateForm.password)
        // user: {
        //   userID: this.userInfo.userID,
        //   email: this.userInfo.email,
        //   password: md5(this.updateForm.password),
        // },
      };
      updatePassword(params).then((res) => {
        if (res.errno === 0) {
          this.$antdMessage.success({
            content: "修改成功!",
          });
          // 展示成功界面
          this.updatePass = true;
          // 打开自动关闭定时器
          this.handelAutoCloseTimer();
          // 重置表单
          this.$refs.form.resetFields();
        } else {
          this.$antdMessage.error({
            content: res.message || "修改失败!",
          });
        }
      });
    },
    // 创建自动关闭dialog计时器
    handelAutoCloseTimer() {
      this.autoClouselastTime = 3;
      this.autoCloseDialogTimer = setInterval(() => {
        --this.autoClouselastTime;
        // 清除计时器
        if (this.autoClouselastTime === 0) {
          this.handelClose();
          clearInterval(this.autoCloseDialogTimer);
          this.autoCloseDialogTimer = null;
        }
      }, 1000);
    },
  },
};
</script>

<style lang="stylus">
.updatePwd {
  .el-dialog__wrapper {
    .el-dialog {
      padding-bottom: 16px;
      width: 510px;
      height: 315px;
      background-color: #ffffff;
      border-radius: 10px;

      .el-dialog__header {
        padding: 24px 36px 0 27px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        img {
          cursor: pointer;
        }

        .headTitle {
          font-family: Segoe UI;
          font-size: 20px;
          color: #666666;
        }

        .el-dialog__headerbtn {
          right: 36px;
          height: 26px;

          .el-dialog__close {
            display: none;
          }
        }
      }

      .el-dialog__body {
        padding: 27px 58px 0 57px;

        .el-form {
          .el-form-item {
            margin-bottom: 20px;

            // display: flex;

            // justify-content: flex-end;
            .el-form-item__label {
              padding-right: 9px;
              font-family: Segoe UI;
              font-size: 14px;
              color: #666666;
            }

            .el-form-item__label::before {
              display: none;
            }

            .el-form-item__content {
              display: flex;

              .el-input {
                width: 200px;
                height: 40px;

                .el-input__inner {
                  padding-left: 11px;
                  font-family: Segoe UI;
                  font-size: 14px;
                  color: #909090;
                }

                .el-input.is-active .el-input__inner, .el-input__inner:focus {
                  border-color: rgba(102, 102, 102, 0.4) !important;
                }
              }

              .tips {
                margin-left: 25px;
                width: 84px;
                font-family: Segoe UI;
                font-size: 12px;
                color: #c0c0c0;
              }

              .fetchCodeBtn {
                cursor: pointer;
              }

              .el-button--primary {
                padding: 0;
                margin-top: 6px;
                margin-left: 20px;
                width: 60px;
                height: 35px;
                background-color: #0e79c0;
                border-radius: 5px;
                font-family: Segoe UI;
                font-size: 16px;
                color: #ffffff;
              }

              .el-button--default {
                padding: 0;
                margin-top: 6px;
                margin-left: 40px;
                width: 60px;
                height: 35px;
                background-color: #ffffff;
                border-radius: 5px;
                border: solid 1px rgba(14, 121, 192, 0.55);
                font-family: Segoe UI;
                font-size: 16px;
                color: #0e79c0;
              }
            }
          }
        }

        .successBox {
          padding-top: 44px;
          padding-bottom: 23px;
          height: 183px;
          display: flex;
          flex-flow: column;
          justify-content: space-between;
          align-items: center;
          font-family: Segoe UI;
          font-size: 22px;
          color: #666666;

          .passIcon {
            width: 21px;
            height: 20px;
          }

          .el-button--primary {
            padding: 0;
            width: 60px;
            height: 35px;
            background-color: #0e79c0;
            border-radius: 5px;
            font-family: Segoe UI;
            font-size: 16px;
            color: #ffffff;
          }

          .timer {
            margin-left: 19px;
            font-family: Segoe UI;
            font-size: 12px;
            color: #666666;
          }
        }
      }
    }
  }
}
</style>